<template>
  <div>
    <div class="btn">
      <el-button type="primary" @click="showfrom">添加</el-button>
    </div>
    <lists
      :menuArr="menuArr"
      @showeditwindow="showeditwindow"
      @menudel="menudel"
    ></lists>
    <froms
      :obj="obj"
      ref="curforms"
      :menuArr="menuArr"
      @refreshmenu="refreshmenu"
    ></froms>
  </div>
</template>

<script>
import lists from "./list.vue";
import froms from "./from.vue";
import { getMenuAll } from "../../request/api.js";
export default {
  data() {
    return {
      menuArr: [],
      obj: {
        isshow: false,
      },
    };
  },
  methods: {
    menudel() {
      this.getmenuList();//删除成功后刷新菜单数据
    },
    refreshmenu() {
      this.getmenuList(); //添加成功后刷新菜单数据
    },
    showeditwindow(curid) {
      this.obj.isshow = true;//显示修改的表单页面
      this.$refs.curforms.getOneMenu(curid);//调用form.vue子组件中的方法
    },
    showfrom() {
      this.obj.isshow = true; //显示添加表单界面
    },
    getmenuList() {
      getMenuAll()
        .then((d) => {
          if (d.data.code == 200) {
            this.menuArr = d.data.list;
          }
        })
        .catch((e) => [console.log(e)]);
    },
  },
  components: {
    lists,
    froms,
  },
  mounted() {
    this.getmenuList();
  },
};
</script>

<style>
.btn{
   margin: 30px 0;
}
</style>